<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title> 
</head>
<body>
    <!-- 全选 全不选 -->
    <div class="box"> 
         <div class="box1">   
             <input type="checkbox"><strong>全选</strong> <span></span> 
         </div> 
         <p></p>
         <div class="box2"> 
             <input type="checkbox"> 选项一
         </div> <p></p>
         <div class="box2">
             <input type="checkbox"> 选项二
         </div> <p></p>
         <div class="box2">
             <input type="checkbox"> 选项三
         </div><p></p>
         <div class="box2">
             <input type="checkbox"> 选项四
         </div><p></p>
         <div class="box2">
             <input type="checkbox"> 选项五
         </div><p></p>
         <div class="box2">
             <input type="checkbox"> 选项六
         </div><p></p>
         <div class="box2">
             <input type="checkbox"> 选项七
         </div><p></p>
         <div class="box2">
             <input type="checkbox"> 选项八
         </div><p></p> 
         <div class="box2">
             <input type="checkbox"> 选项九
         </div>
    </div>
</body>
<script>
    //获取所有单选框和复选框
    var  input=document.querySelectorAll("input")
    console.log(input.length) 
    //获取全不选的文字
    var qx=document.querySelector(".box1").getElementsByTagName("span")[0]
    console.log(qx) 
    //
    for(var i=0;i<input.length;i++){
         input[i].index=1
         //鼠标放开事件
         input[0].onmouseup=function(){
             //获取全选的文字
              var ochang=document.querySelector(".box1").getElementsByTagName("strong")[0] 
              if(this.checked==true){
                   ochang.innerHTML="全选"
                   for( i=1;i<input.length;i++){
                        input[i].checked=false
                   }
              }else{
                  ochang.innerHTML="全不选"
                  for(i=1;i<input.length;i++){
                       input[i].checked=true
                  }
              }
         }
         





    }

</script>
</html>
<style>
    .box{
        width: 150px;
        height: 400px;
        border: 1px solid black;
        border-radius: 10px;
        margin:  0 auto;
    }
    .box1{ 
        width: 100%;
        height: 30px;
        line-height: 30px;
        border-bottom: 1px solid black; 
    }
    div{
        text-align: center;
    }
</style>